<%@ page import="com.zwy.Shopping.model.Product" %>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="js/bootstrap.bundle.js"></script>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script src="js/messages_zh.js"></script>
    <% Product p = (Product) request.getSession().getAttribute("now_shopping_product");%>
    <meta charset="UTF-8">
    <title>立即购买</title>
    <style>
        .error{
            color:red;
        }
    </style>
</head>
<body>



<div class="container-fluid mt-3 d-flex">
    <div class="card w-25 m-auto d-flex">

        <div class="card-title m-auto d-flex">立刻下单界面</div>
        <div class="card-img-top m-auto d-flex"><img class="img-thumbnail m-auto" src="img/<%=p.getImage()%>"></div>
        <div class="card-footer m-auto d-flex">
            <form class="form-control m-auto" id="shoppingNowForm" action="now_shopping_order" method="post">
                <div>
                    <label class="d-flex">商品名:</label>
                    <input type="text" value="<%=p.getName()%>" readonly id="productName">
                </div>
                <div>
                    <label class="d-flex">价格:</label>
                    <input type="text" value="<%=p.getPrice()%>" readonly id="productPrice">
                </div>
                <div>
                    <label>购买数量:</label>
                    <input type="number" name="buyNumber" id="buyNumber" value="1" oninput="calculateTotal()">
                </div>
                <div>
                    <label class="d-flex">总合计:</label>
                    <input type="text" name="totalMoney" id="totalMoney" value="<%=p.getPrice()%>" readonly>
                </div>
                <div class="mt-3">
                    <button class="btn btn-primary" type="submit">立刻支付</button>
                    <a class="btn btn-secondary" href="index.jsp">返回首页</a>
                </div>

            </form>
        </div>
    </div>
</div>
</body>
</html>
<script>
    var stockQuantity =<%=p.getStock()%>;
    <%--//${session.getAttribute("now_shopping_product").getStock()}--%>
    function calculateTotal() {
        // 获取价格和产品数量
        var productPrice = parseFloat(document.getElementById('productPrice').value);
        var buyNumber = parseInt(document.getElementById('buyNumber').value, 10);

        // 检查价格和数量是否有效
        if (isNaN(productPrice) || isNaN(buyNumber) || buyNumber <= 0) {
            document.getElementById('totalMoney').value = '';
            return;
        }

        // 计算总合计
        var totalMoney = productPrice * buyNumber;

        // 更新总合计输入框的值
        document.getElementById('totalMoney').value = totalMoney.toFixed(2); // 保留两位小数
    }

    // 初始加载时也可以调用一次以设置初始的总合计（如果需要的话）
    calculateTotal();
    $().ready(function () {
       // 自定义验证方法
        $.validator.addMethod("greaterThanTen", function (value, element) {
            return this.optional(element) || (parseInt(value, 10) < stockQuantity)
        }, "请输入小于10的数字");

        // 初始化验证
        $("#shoppingNowForm").validate({
            rules: {
                buyNumber:
                    {
                        required: true,
                        number: true, // 确保是数字
                        min: 1, // 最小为1（如果不需要包含0，可以改为1）
                        greaterThanTen: true // 应用自定义验证
                    }
            },
            messages:
                {
                    buyNumber:
                        {
                            required:
                                "请输入购买数量",
                            number: "请输入有效的数字",
                            min: "购买数量不能小于1",
                            greaterThanTen: "购买数量必须小于库存量"
                        }
                }
        });
    });
</script>
